/**
 * init
 */
var $items, itemWidth;
/**
 * 随机高度，随机图片，布局函数
 */
var wf = {
  // 返回随机高宽的图片
  rdmImg: function(){
    var width = Math.floor(Math.random() * 100) + 300,
        height = Math.floor(Math.random() * 500) + 300;
    return "http://placekitten.com/" + height + '/' + width;
  },
  // 进行排列
  arrange: function(){
    // 选取了所有的 div容器
    $items = $('#wf .photo-container');
    // 获取第一个容器的宽
    itemWidth = 167;

      debugger;
    // 获取视窗的宽
    var viewWidth = document.documentElement.clientWidth || document.body.clientWidth,
        // 计算出列
        // cols = Math.floor( viewWidth / itemWidth );
        cols = 2;

    // 存放每列当前长度的数组并初始化   // 如果两列 返回[0,0]
    var colsHeight = [];
    for(var i = 0; i< cols; i++){
        if( i == 1) {
            colsHeight.push(86);
        }else {
            colsHeight.push(0);
        }
     }


    var curHeight = colsHeight[0], 
                col = 0;
    
    // 遍历每一项item
    $items.each( function(ele, idx) {
      var $this = $(this);
      var $img = $this.find("img").first();
        
        $img.on("error", function () {
            // $img.attr("src", "../src/assets/images/default.png");
        });

        if ($img.get(0).complete) {
            addItems();                        
        } else {
            $img.on("load error", function () {
                addItems();
            });
        }
           
        function addItems() {
            for(var i = 0; i< colsHeight.length; i++){
                if(colsHeight[i] < curHeight){
                    curHeight = colsHeight[i];
                    col = i;
                }
            } 
            console.log(colsHeight)
            debugger
            // if (_this.leftHeight <= _this.rightHeight) {
            //     $l.append($this);
            //     _this.leftHeight = $l.height();
            // } else {
            //     $r.append($this);
            //     _this.rightHeight = $r.height();
            // }
            // 获取当前高度和当前列
         
            /*
                如果高度小于当前高度  那么当前高度就等于这个小的高度  并且当前列为高度较小的列 
                将当前div进行定位  top等于当前高度  left等于列*列数   
                当前列的高度为最后这个元素的高度
            */   
          
            // ele.style.left = col * itemWidth  + 15 * (1 + col) + 'px'  ;
            if(col == 0) {
                $this.css("left", col * itemWidth  + 15  + 'px'   )
            }
            if(col == 1) {
                $this.css("left", col * itemWidth  + 26  + 'px')
                // $(this).left = col * itemWidth  + 26  + 'px'  ;
            }
            $this.css("top", curHeight + 'px');
            console.log($this.height())
            colsHeight[col] += $this.height();
            curHeight = colsHeight[col]
        }  

  
    });
  },
}

export default {
    data() {
        return {
            photos: false,
            pageNum: 1,
            curPage: 0,
            pageSize: 10,
            showPage: false,
        }
    },
    beforeRouteEnter (to, from, next) {
        next(vm => {
            vm.init();
        })
    },
    mounted() {
        // this.getImgs();
        this.init();
    },
    methods: {
        init() {
            this.$util.setTitle('大赞门城');
            this.queryPhotoList();
            this.$util.droploadUpOnScroll(this.queryPhotoList);
        },
        /**
         * 获取列表
         */ 
        queryPhotoList() {
            //如果当前页==下一页则不发请求
            if (this.pageNum == this.curPage) {
                 return 
            }else { 
                this.curPage = this.pageNum; 
            }
            let _this = this;
            var params = {
                "pageNum": _this.pageNum,
                "pageSize": _this.pageSize
            };
            this.$http.post("/praisingCity/getPhotoList", params).then(function (rep) {
                if(rep.meta && rep.meta.code == '0') {
                    let datas = rep.data || [];
                    if( !_this.photos ){
                        _this.photos=[]
                    }
                    _this.photos = _this.photos.concat(datas)
                    
                    setTimeout(function(){
                          wf.arrange();
                    },0) 
                    if (datas >= _this.pageSize) {
                        //是否有下一页
                        _this.pageNum++;
                    }
                }
            }).catch(function(err){
                console.log(err);
            })
        },
        /**
         * 预加载
         */
        preload(arr,callback) {  
                var images = new Array();
                for (var i = 0; i < arr.length; i++) {  
                    images[i] = new Image()  
                    images[i].src = preload.arguments[i]  
                }  
        },
        /**
         * 点赞 
         */
        praise(item) {
            let _this = this;
            let param = {
                "id": item.id
            }
            _this.$http.post('praisingCity/praise',param).then(function(rep){
                if(rep.meta && rep.meta.code == '0') {
                    item.praised = !item.praised;
                    if(item.praised) {
                        item.praiseCount = item.praiseCount - 0 + 1; 
                    }else {
                       item.praiseCount = item.praiseCount - 0 - 1; 
                    }
                    
                }
            }).catch(function() {

            })
        },
        /**
         * 跳转详情
         */
        godetail(id) {
            this.$router.push({'name': 'detail',params:{'id':id}})
        }, 

        goPhoto(){
            let code = sessionStorage.getItem('toon_code');
            let url = configM.comUrl + '/conv-photo/index.html?code='+ code
            window.location.href = url;
        },
        /**
         * 排序 
         */
        arrlist() {
            let _this = this,
                $l = $("#waterfalls-left"),
                $r = $("#waterfalls-right");
            _this.leftHeight = 0;
            _this.rightHeight = 0;
            setTimeout(function () {
                console.log($("#items>div"));
                $("#items>div").each(function (index, val) {
                    var $this = $(this);
                    var $img = $this.find("img").first();
                    $img.on("error", function () {
                        // $img.attr("src", "../src/assets/images/default.png");
                    });
                
                    if ($img.get(0).complete) {
                        addItems();                        
                    } else {
                        $img.on("load error", function () {
                            addItems();
                        });
                    }
                
                    function addItems() {
                        if (_this.leftHeight <= _this.rightHeight) {
                            $l.append($this);
                            _this.leftHeight = $l.height();
                        } else {
                            $r.append($this);
                            _this.rightHeight = $r.height();
                        }
                    }
                });
            }, 0);
        }
    }


}

// export default{
//     data () {
//       return {
//         items: [],
//         imgLength: 0,
//         curPage:0, // 当前页
//         pageNum: 1, // 当前页
//         pageSize: 10 // 每页条数
//       }
//     },

//     mounted () {
//         this.$util.setTitle('大赞门城');
//         this.init();
//     },
//     methods: {
//         init() {
//             this.getList();
//             console.log(this.$el)
//             // this.$util.moreAndMoreOnscroll(this.getList, 'MoreAndMore')
//         },
//         getList() {
//             let _this = this;
//             // let arr = getImgs();
//             // _this.loadImg(arr , 0)
//             //this.items = this.items.concat(arr);
//             /**
//              * 获取大赞北京列表
//              */
//             let param = {
//                 'pageNum': this.pageNum,
//                 'pageSize': this.pageSize
//             }
//             _this.$http.post('praisingCity/getPhotoList',param).then(function(rep){
//                 if(rep.meta && rep.meta.code == '0') {
//                     debugger;
//                      for(var i = 0; i < 20; i++) {
//                          _this.items = _this.items.concat(rep.data);
//                      }
//                      console.log(_this.$el.querySelectorAll('.photo-container'))
//                      wf.arrange();
//                 }
//             }).catch(function(err){

//             })   
//         },
//         /**
//          * 加载图片
//          * @param {*} arr 
//          * @param {*} index 
//          */
//         loadImg(arr,index){
//           let _this = this;
//           let img = new Image();
//           img.src=arr[index].photo ;
//           img.onload=function(){
//               _this.items.push( arr[index] )
//               if(index < arr.length - 1){
//                 _this.loadImg(arr,index + 1)
//               }
//           }
//         },
//         /**
//          * 排列组合
//          */
//         arrange() {
//               wf.arrange();
//         },
//         /**
//          * 跳转详情 
//          */
//         godetail(id) {
//             this.$router.push({'name': 'detail',params:{'id':3}})
//         },
//         /**
//          * 点赞  
//          */    
//         praise(item) {
//             let _this = this;
//             let param = {
//                 "id": item.id
//             }
//             _this.$http.post('praisingCity/praise',param).then(function(){
//             }).catch(function() {

//             })
//         } 
//     }
// }